<template>
  <div>
    <el-dialog :visible.sync="applyDialog"
               :close-on-click-modal="false"
               width="600px"
               center
               :append-to-body="true">
      <div class="getMoney-dialog-div">
        <h2>获取报价</h2>
        <div class="tips">
          请完善以下信息，仪会通工作人员会在24小时内与您联系
        </div>
        <form id="memberFormID">
          <div class="getMoney-input-out"
               :class="[isred1 ? 'bdred' : '', isgreen1 ? 'bdgreen' : '']">
            <input id="Name"
                   v-model.trim="name"
                   type="type"
                   name="Name"
                   placeholder="请输入您的姓名"
                   autocomplete="off"
                   @focus="getfocus(1)"
                   @blur="getblur(name, 1)">
          </div>
          <div class="getMoney-input-out"
               :class="[isgreen2 ? 'bdgreen' : '', isred2 ? 'bdred' : '']">
            <input v-model="Position"
                   type="type"
                   placeholder="请输入您的职位"
                   class="getMoneyInput"
                   autocomplete="off"
                   @focus="getfocus(2)"
                   @blur="getblur(Position, 2)">
          </div>
          <div class="getMoney-input-out"
               :class="[isgreen3 ? 'bdgreen' : '', isred3 ? 'bdred' : '']">
            <input v-model.trim="Tel"
                   type="type"
                   maxlength="11"
                   placeholder="请输入您的手机号码"
                   class="getMoneyInput"
                   autocomplete="off"
                   @focus="getfocus(3)"
                   @blur="getblur(Tel, 3)">
          </div>
          <div class="getMoney-input-out tl positionR"
               :class="[isgreen4 ? 'bdgreen' : '', isred4 ? 'bdred' : '']">
            <input id="getMoney-code"
                   v-model.trim="getMoneycode"
                   type="type"
                   name=""
                   placeholder="请输入验证码"
                   class="code getMoneyInput"
                   @focus="getfocus(4)"
                   @blur="getblur(getMoneycode, 4)">
            <div class="codeCountDiv">
              <input v-if="timeShow"
                     id="btn"
                     type="button"
                     value="获取验证码"
                     style="color: rgb(12, 127, 242)"
                     class="getCode"
                     @click="settime()">
              <span v-if="!timeShow"
                    class="yfs">重新获取({{ count }}秒)</span>
            </div>
          </div>
          <div class="getMoney-input-out"
               :class="[isgreen5 ? 'bdgreen' : '', isred5 ? 'bdred' : '']">
            <input v-model="Company"
                   type="type"
                   placeholder="请输入您的企业名称"
                   class="getMoneyInput"
                   @focus="getfocus(5)"
                   @blur="getblur(Company, 5)">
          </div>
          <div class="getMoney-input-out"
               :class="[isgreen6 ? 'bdgreen' : '', isred6 ? 'bdred' : '']">
            <input v-model="Content"
                   type="type"
                   placeholder="请输入主营产品"
                   class="getMoneyInput"
                   autocomplete="off"
                   @focus="getfocus(6)"
                   @blur="getblur(Content, 6)">
          </div>
          <div class="h30 getMoney-errorOut">
            <p id="getMoneyErrorTips"
               class="errorTips tl" />
          </div>
          <div class="getMoney-btn"
               @click="getMoneySubmit()">提交</div>
          <p class="getMoney-link">咨询热线 157-1885-0776</p>
        </form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { checkPhone, debounce, mobileStar } from '@/utils/validate'
import api from '@/api'
import axios from 'axios'
export default {
  data () {
    return {
      applyDialog: false,
      name: '',
      Content: '',
      Company: '',
      getMoneycode: '',
      Position: '',
      Tel: '',
      isred1: false,
      isred2: false,
      isred3: false,
      isred4: false,
      isred5: false,
      isred6: false,
      isgreen1: false,
      isgreen2: false,
      isgreen3: false,
      isgreen4: false,
      isgreen5: false,
      isgreen6: false,
      mobile: null,
      timeShow: true,
      timer: null,
      count: ''
    }
  },

  methods: {
    getblur (val, index) {
      if (val == '') {
        this['isred' + index] = true
      } else {
        this['isred' + index] = false
        this['isgreen' + index] = false
      }
    },
    getfocus (index) {
      this['isgreen' + index] = true
    },
    settime () {
      const _this = this
      _this.mobile = checkPhone(_this.Tel)
      if (!_this.mobile) {
        var getMoneyErrorTips = document.getElementById('getMoneyErrorTips')
        _this.isred3 = true
        getMoneyErrorTips.innerHTML = '* 请输入正确的手机号格式'
        return false
      }
      const params = {
        mobile: this.Tel,
        type: 0 // 0-快速注册登录时，1-验证码原手机号时，2-修改密码时，3-绑定手机号
      }
      api.login.sendMobileCode(params).then((res) => {
        this.$message({ type: 'success', message: '已成功发送验证码！' })
        const TIME_COUNT = 60
        if (!this.timer) {
          this.count = TIME_COUNT
          this.timeShow = false
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--
            } else {
              this.timeShow = true
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
        }
      })
      // axios
      //   .post(`api/phone/list/Home/SendCode?mobile=${_this.Tel}`)
      //   .then((res) => {
      //     this.$message({ type: "success", message: res.data });
      //     const TIME_COUNT = 60;
      //     if (!this.timer) {
      //       this.count = TIME_COUNT;
      //       this.timeShow = false;
      //       this.timer = setInterval(() => {
      //         if (this.count > 0 && this.count <= TIME_COUNT) {
      //           this.count--;
      //         } else {
      //           this.timeShow = true;
      //           clearInterval(this.timer);
      //           this.timer = null;
      //         }
      //       }, 1000);
      //     }
      //   });
    },
    // 校验手机号
    // vaildCode() {
    //   // var vaild  = $('#mobileInput').val()
    //   var getMoneyErrorTips = document.getElementById("getMoneyErrorTips");
    //   var telReg =
    //     /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    //   var vaildCodeStatus = true;
    //   if (this.Tel == "") {
    //     getMoneyErrorTips.innerHTML = "* 请输入正确的手机号格式";
    //     return false;
    //   } else if (!telReg.test(this.Tel)) {
    //     getMoneyErrorTips.innerHTML = "* 请输入正确的手机号格式";
    //     return false;
    //   }
    //   return vaildCodeStatus;
    // },
    getMoneySubmit () {
      var getMoneyErrorTips = document.getElementById('getMoneyErrorTips')
      // getMoneyErrorTips.innerHTML = '* 请输入正确的手机号格式'
      if (this.name == '') {
        getMoneyErrorTips.innerHTML = '* 请输入您的姓名'
        this.isred1 = true
        return false
      }
      if (this.Position == '') {
        getMoneyErrorTips.innerHTML = '* 请输入您的职位'
        this.isred2 = true
        return false
      }
      if (this.Tel == '') {
        getMoneyErrorTips.innerHTML = '* 请输入您的手机号码'
        this.isred3 = true
        return false
      }
      this.mobile = checkPhone(this.Tel)
      if (!this.mobile) {
        var getMoneyErrorTips = document.getElementById('getMoneyErrorTips')
        this.isred3 = true
        getMoneyErrorTips.innerHTML = '* 请输入正确的手机号格式'
        return false
      }
      if (this.getMoneycode == '') {
        this.isred4 = true
        getMoneyErrorTips.innerHTML = '* 请输入验证码'
        return false
      }
      if (this.Company == '') {
        this.isred5 = true
        getMoneyErrorTips.innerHTML = '* 请输入您的企业名称'
        return false
      }
      if (this.Content == '') {
        this.isred6 = true
        getMoneyErrorTips.innerHTML = '* 请输入主营产品'
        return false
      }
      const loginParams = {
        // 验证码登录
        mobile: this.Tel, // 手机号
        areaCode: '+86',
        code: this.getMoneycode,
      }
      api.login.checkMobileCode(loginParams).then((res) => {
        if (res.code == 200) {
          const FORM = {
            name: this.name,
            product: this.Content,
            companyName: this.Company,
            post: this.Position,
            mobile: this.Tel,
          }
          api.login.saveLeads(FORM).then((res) => {
            if (res.code != 200) {
              this.$message({
                type: 'error',
                message: '服务器异常，建议您直接拨打电话：4006-315-817'
              })
            } else {
              this.applyDialog = false
              this.$message({
                type: 'success',
                message: '提交成功，稍后会有工作人员与您联系！'
              })
            }
          })
            .catch((error) => {
              this.$message({
                type: 'error',
                message: '服务器异常，建议您直接拨打电话：4006-315-817'
              })
            })
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
          this.isred4 = true
          return false
        }
      })
      //   axios
      //     .post(
      //       `api/phone/list/Home/CheckCode?mobile=${this.Tel}&code=${this.getMoneycode}`
      //     )
      //     .then((res) => {
      //       if (res.data <= 0) {
      //         this.$message({
      //           type: "error",
      //           message: "您输入验证错误，请确认后重试",
      //         });
      //         this.isred4 = true;
      //         return false;
      //       } else {
      //         let FORM = {
      //           Name: this.name,
      //           Content: this.Content,
      //           Company: this.Company,
      //           Position: this.Position,
      //           Tel: this.Tel,
      //           CooType: 15,
      //           Email: "",
      //         };
      //         axios
      //           .post(`/api/Common/AddCooperation`,FORM,{
      //     'Content-Type':'application/json'  //如果写成contentType会报错
      // })
      //           .then((res) => {
      //             if (res.statusText!="OK") {
      //               this.$message({
      //                 type: "error",
      //                 message: "服务器异常，建议您直接拨打电话：4006-315-817",
      //               });
      //             } else {
      //               this.applyDialog = false;
      //               this.$message({
      //                 type: "success",
      //                 message: "提交成功，稍后会有工作人员与您联系！",
      //               });
      //             }
      //           })
      //           .catch((error) => {
      //             this.$message({
      //               type: "error",
      //               message: "服务器异常，建议您直接拨打电话：4006-315-817",
      //             });
      //           });
      //       }
      //     });

      //       $.post("https://www.instrument.com.cn/netshow/Combo/Cmmon/SaveCooperation", $("#memberFormID").serialize(), function (data) {
      //     if (!data.head) {
      //         getMoneyErrorTips.innerHTML = '您可以通过电话咨询详细信息：4006-315-817';
      //         alert("服务器异常，建议您直接拨打电话：4006-315-817");
      //     } else {
      //         alert("提交成功，稍后会有工作人员与您联系！");
      //         getMoneyErrorTips.innerHTML = '提交成功，稍后会有工作人员与您联系！';
      //         successmsg();
      //     }
      // }).error(function (e) {
      //     getMoneyErrorTips.innerHTML = '您可以通过电话咨询详细信息：4006-315-817';
      //     alert("服务器异常，建议您直接拨打电话：4006-315-817");
      // });
    }
  }
}
</script>

<style scoped lang="scss">
.errorTips {
  height: 28px;
  color: #f14728;
  font-size: 12px;
  width: 364px;
  padding-top: 4px;
}
.bdgreen {
  border: 1px solid #0c7ff2 !important;
}
.h30 {
  height: 30px;
}
.getMoney-btn {
  width: 480px;
  margin: 0 auto 30px;
  height: 60px;
  line-height: 60px;
  background: #0C7FF2;
  border-radius: 4px;
  font-size: 24px;
  font-weight: 500;
  text-align: center;
  color: #ffffff;
  cursor: pointer;
}
.getMoney-errorOut {
  width: 480px;
  margin: 0 auto 12px;
}
.getMoney-link {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #7d7e80;
  line-height: 25px;
}
.codeCountDiv {
  position: absolute;
  right: 0;
  top: 0px;
}
.getMoney-input-out .getCode {
  padding: 0 16px;
}
.tl {
  text-align: left;
}
.getMoney-input-out .code {
  width: 200px;
}
.getMoney-input-out input {
  border: none;
  outline: none;
  font-size: 16px;
  width: 100%;
  height: 90%;
  color: #7d7e80;
  background: #fff;
}
.getMoneyInput {
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  font-size: 30px;
  font-weight: 600;
}
.getMoney-dialog-div h2 {
  font-size: 34px;
  font-weight: 500;
  text-align: center;
  color: #323233;
  margin-bottom: 12px;
  margin-top: 15px;
}
.getMoney-dialog-div .tips {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  color: #7d7e80;
  line-height: 22px;
  margin-bottom: 30px;
}
.getMoney-input-out {
  width: 480px;
  height: 50px;
  line-height: 50px;
  border: 1px solid #c8c9cc;
  border-radius: 4px;
  margin: 0 auto 12px;
  padding: 0 20px;
}
.bdred {
  border: 1px solid red !important;
}
.yfs {
  font-size: 14px;
  padding-right: 10px;
  color: #7d7e80;
}
</style>
